<template>
	<view class="content">
		<view class="statusBox"></view>
		<view class="titleBox">
			<view class="fouthBox" @tap="btnTitle(index)" v-for="(item,index) in titleList" :key="index">
				{{item.name}}
				<!-- <image class="icon iconTop  iconFlase"  src="/static/index/search/icon_topFalse.png" mode=""  v-if="index!==0 &&item.type==0||item.type==2"></image> -->
				<!-- <image class="icon iconDown  iconFlase" src="/static/index/search/icon_topFalse.png" mode=""  v-if="index!==0 &&item.type==0||item.type==1"></image> -->
				<!-- <image class="icon iconTop iconTrue"    src="/static/index/search/icon_topTrue.png"  mode=""  v-if="index!==0 &&item.type==1"></image> -->
				<!-- <image class="icon iconDown iconTrue"   src="/static/index/search/icon_topTrue.png"  mode=""  v-if="index!==0 &&item.type==2"></image> -->
				<image class="icon iconTop  iconFlase"  src="/static/index/search/icon_topFalse.png" mode=""  v-if="index!==0 &&item.type==0||index!==0 && item.type==2"></image>
				<image class="icon iconDown  iconFlase" src="/static/index/search/icon_topFalse.png" mode=""  v-if="index!==0 &&item.type==0||index!==0 && item.type==1"></image>
				<image class="icon iconTop iconTrue"    src="/static/index/search/icon_topTrue.png"  mode=""  v-if="index!==0 &&item.type==1"></image>
				<image class="icon iconDown iconTrue"   src="/static/index/search/icon_topTrue.png"  mode=""  v-if="index!==0 &&item.type==2"></image>
			</view>
		</view>

		<view class="proList">
			<view class="proRows" v-for="(item,index) in rowsList" :key="index" @tap="inDetails(item.id)">
				<image class="cover" :src="item.cover" mode=""></image>
				<view class="HisTitle fontSize14 overflow_two">{{item.title}}</view>
				<!-- <view class="typeBoxs">
					<view class="type" v-for="(items,indexs) in item.type" :key="indexs">{{items.name}}</view>
				</view> -->
				<view class="clearBoth"></view>
				<view class="priceBox">
					<view class="price">¥<view class="priceTip">{{item.price}}</view></view>
					<s class="priceBefore">¥{{item.priceBefore}}</s>
					<view class="user">已拼{{item.use}}件</view>
					<view class="clearBoth"></view>
				</view>
			</view>
		</view>
		
		<view class="noneBox" v-if="rowsList.length == 0">
			<image class="noneImage" src="/static/index/search/none.png" mode=""></image>
			<view class="noneTitle">搜索结果为空，换个关键词试试~</view>
		</view>

	</view>
</template>
<style>
	.content .noneBox{width: 100%;display: flex;justify-content: center;flex-wrap: wrap;margin-top:300upx;}
	.content .noneBox .noneImage{width: 400upx;height:260upx;}
	.content .noneBox .noneTitle{width: 100%;margin-top: 20upx;color:#B3B3B3;text-align: center;}
	
	.content{width: 90%;margin-left: 5%;}
	.content .searchBox{background: white;margin-top: 52upx;margin-bottom: 20upx;}
	.content .searchBox .search{width:60%;padding:0 2.5%;height:56upx;line-height: 56upx;float:left;background:rgb(245,245,249);border-radius: 100upx;position: relative;}
	.content .searchBox .search .icons{margin-left:10upx;float: left;}
	.content .searchBox .search .btnSearch{float: right;width:20%;text-align: center;position: absolute;top:0;right:-20%;font-size: 14px;}
	.content .searchBox .search .searchInput{width:70%;color:#999999;font-size: 14px;height:56upx;line-height: 56upx;margin-left:20upx;float: left;}
	.content .searchBox .search .uni-input-placeholder{font-size: 14px;}
	.content .searchBox .clockBox{width:10%;float: left;position: relative;}
	.content .searchBox .clockBox .iconClock{width:24upx;height:40upx;float: left;margin-top: 8upx;}
	.content .titleBox{width: 100%;margin-top: 20upx;}
	.content .titleBox .fouthBox{width: 25%;float: left;text-align: center;position: relative;}
	.content .titleBox .fouthBox .icon{width: 18upx;height:10upx;position: absolute;right:20%}
	.content .titleBox .fouthBox .iconTop{top:15%;}
	.content .titleBox .fouthBox .iconDown{bottom:15%;transform: rotate(180deg);}
	.content .proList{width: 90%;margin-left: 5%;display: flex;justify-content:left;flex-wrap: wrap;}
	.content .proList .proRows{width:47.5%;margin:15upx 2.5% 15upx 0;background: white;border-radius: 10upx;padding-bottom: 10upx;}
	.content .proList .proRows .cover{width: 100%;height:336upx;border-radius: 10upx;}
	.content .proList .proRows .HisTitle{font-weight: bold;margin-left: 5%;height:76upx}
	.content .proList .proRows .typeBoxs{height:96upx;margin-left: 5%;}
	.content .proList .proRows .type{font-size: 20upx;float: left;margin:5upx;padding:5upx;border-radius: 10upx;color:#DC582A;background:rgb(251,238,233);}
	.content .proList .proRows .priceBox{width: 100%;margin-top: 10upx;margin-left: 5%;}
	.content .proList .proRows .priceBox .price{float:left;font-size: 24upx;color:#262626;margin-right: 5upx;font-weight: bold;font-family: hzgb;}
	.content .proList .proRows .priceBox .priceTip{float: right;margin-left:5upx;font-size: 32upx;color:#262626;margin-right: 5upx;font-weight: bold;font-family: hzgb;position: relative;top:-4upx}
	.content .proList .proRows .priceBox .priceBefore{float:left;color:#999999;font-size: 20upx;}
	.content .proList .proRows .priceBox .user{width: 95%;margin-left: 5%;float:right;font-size: 24upx;margin-right: 8%;color:#999999;}
</style>
<script>
	import uniIcons from '@/components/uni-icons/uni-icons.vue'
	import Share from '@/common/wx_share.js'
	export default {
		components:{
			uniIcons
		},
		data() {
			return {
				share:{
					title:"",
					path:'/pages_index/pages/searchPages/searchPages',
					imageUrl:'',
					desc:'',
					content:''
				},
				historyData:[],
				inputValue:"",
				titleList:[
					{name:"综合排序",type:0},
					{name:"价格",type:0},
					{name:"销量",type:0},
					{name:"佣金",type:0},
				],
				rowsList:[
					// {id:1,cover:"/static/del/del_3.png",title:"描述述描述述描描述述描述述描述述描述述描述述描述述述述描述述描述述描述述",price:"1",priceBefore:"12",use:"123",type:[{name:"旗舰店"},{name:"退货包运费"},{name:"退货包运费"}]},
					// {id:1,cover:"/static/del/del_3.png",title:"描述述描述述描述述描述述描述述描述述",price:"1",priceBefore:"12",use:"123",type:[{name:"旗舰店"},{name:"退货包运费"}]},
					// {id:1,cover:"/static/del/del_3.png",title:"描述述描述述描述述描述述描述述描述述",price:"1",priceBefore:"12",use:"123",type:[{name:"旗舰店"},{name:"退货包运费"},{name:"退货包运费"}]}
				],
				searchId:"",
				searchName:"",
				pages:1,
				sorts:0,
				lastE:0,
				
			}
		},
		onLoad(e){
			if(e.id){
				this.searchId = e.id
			}
			this.searchName = e.searchValue
			uni.setNavigationBarTitle({
				title:e.searchValue
			})
			this.AjaxLoad();
		},
		onReachBottom(){
			this.pages++
			this.AjaxLoad();
		},
		methods: {
			AjaxLoad(){
				var that = this;
				var hosList = [],rowsList=[]
				uni.getStorage({
				    key: 'history',
				    success: function (res){
						that.historyData = res.data
				    }
				});
				// 0综合 1销量高到低 2销量低到高 3价格低到高 4价格高到低 5佣金低到高 6佣金高到低
				if( this.titleList[1].type == 1 ){
					this.sorts = 4
				}else if( this.titleList[1].type == 2 ){
					this.sorts = 3
				}else if( this.titleList[2].type == 1 ){
					this.sorts = 1
				}else if( this.titleList[2].type == 2 ){
					this.sorts = 2
				}else if( this.titleList[3].type == 1 ){
					this.sorts = 6
				}else if( this.titleList[3].type == 2 ){
					this.sorts = 5
				}else if( this.titleList[0].type == 0 || this.titleList[0].type == 1 || this.titleList[0].type == 2 ){
					this.sorts = 0
				}
				
				let param={
					page:this.pages,
					type:0,
					sort:this.sorts,
					// goods_name:this.searchName
					cate_id:this.searchId
				};
				this._$InitRequest.request('Index/getgoodlst', param).then(res => {
					res.data.goodres.forEach( (item) =>{
						rowsList.push({
							id:item.id,
							cover:item.thumb_url,
							title:item.goods_name,
							price:item.min_price,
							priceBefore:item.market_price,
							use:item.pin_sale,
						})
					})
					for (var i = 0; i < rowsList.length; i++){this.rowsList.push( rowsList[i] )}
				},error=>{})
				
			},
			getValue(e){this.inputValue = e.target.value},
			searBtn(){
				if( this.inputValue == "" ){
					uni.showToast({icon:"none",title:"请输入搜索内容"})
					return;
				}else{
					var val = {"name":this.inputValue}
					this.historyData.push(val)
					uni.setStorage({
					    key: 'history',
					    data: this.historyData,
					    success: function(){}
					});
				}
			},
			TapBack(){uni.switchTab({url:"/pages/tabbar/index"})},
			btnTitle(e){
				// this.titleList[e].type += 1
				// if( this.titleList[e].type == 3 )this.titleList[e].type = 1
				uni.showLoading({
					title:"加载中..."
				})
				if( this.lastE !== e ){
					for (var i = 0; i <  this.titleList.length; i++) {
						this.titleList[i].type = 0
					}
					this.titleList[e].type += 1
				}else{
					this.titleList[e].type += 1
				}
				if( this.titleList[e].type == 3 )this.titleList[e].type = 1
				this.lastE = e
				
				this.rowsList = []
				this.pages = 1
				this.AjaxLoad();
				setTimeout(()=>{
					uni.hideLoading()
				},500)
			},
			inDetails(e){
				uni.navigateTo({
					url:"/pages_index/pages/details/details?id=" + e
				})
			},
		}
	}
</script>